包包小窝

视频反爬虫

思路：

创建一个canvas节点和一个video节点，video不显示在DOM里。实时把video内容绘制到canvas画布内。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="640" height="480" style="border: 1px solid black;" ></canvas>
    <button onclick="play()" >play</button>
    <button onclick="stop()" >stop</button>
</body>
</html>
<script>
    const SRC = '../../public/【知微数据】分析，让数据变成情报-00.00.00.000-00.00.10.400.mp4';
    const canvas = document.getElementById('canvas');
    const video = document.createElement('video');
    const ctx = canvas.getContext('2d');
    const timer = null;

	// 初始化，设定视频链接，并在把第一帧画面截取给画布
	// 注：并未设置自动播放
    {
        video.src = SRC;
        video.currentTime = 0.01; // 起始帧为0的话，无画面
        video.addEventListener('canplay',()=>ctx.drawImage(video, 0, 0, canvas.width, canvas.height));
    }

	// 后台的video播放，并实时把内容绘制到canvas上
    const play = ()=>{
        video.play();
        timer = setInterval(()=>{
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        }, 1000/25);
    }

	// 清除定时器
    const stop = ()=>{
        video.pause();
        clearInterval(timer);
    }

</script>

视频反爬虫 ​

视频反爬虫